<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="引用文章" :isBack="false" :isAppBtn="false" :isHome="!isApp">
			<view slot="right" class="font30 lh44 opacity80 action-text" @click="closePage">
				<u-icon name="close" color="#fff"></u-icon>
			</view>
		</HeadCustom>
		<view class="wrap">
			<view class="article-card fboxRow Ycenter bg">
				<image class="pic" :src="detail.img" mode="aspectFill"></image>
				<view class="title font-ell2 flex1 font32 lh44">{{detail.title}}</view>
			</view>
			<!-- <view class="article-relevance">
				<view class="hd font32 lh44">关联信息</view>
				<view class="bd">
					<view class="user-item fboxRow" v-for="(item, index) in userList" :key="index" @click="radioTap(item,index)">
						<image class="avatar" :src="item.imagePhoto" mode="aspectFill"></image>
						<view class="line"></view>
						<view class="fboxCol flex1 info">
							<view class="font32 lh44 font-ell1 name">{{item.realName}}</view>
							<view class="font28 lh40 font-ell1 company" v-if="item.companyName || item.industry"><text class="bwfont bw-Vector8"></text>{{item.companyName || item.industry}}</view>
							<view class="font28 mt10 font-ell1 lh40" v-if="item.positionName"><text class="bwfont bw-a-zu3478"></text>{{item.positionName || ''}}</view>
						</view>
						<view class="fboxCol Ycenter Xcenter">
							<image v-if="item.companyId" class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/single/icon-2.png" mode="aspectFill"></image>
							<image v-else class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/single/icon-1.png" mode="aspectFill"></image>
							<u-icon v-if="item.check" size="18" name="checkmark-circle-fill" color="#FFD9B5"></u-icon>
							<view v-else class="radio"></view>
						</view>
					</view>
				</view>
			</view> -->
			<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<view class="bottom-btn fboxRow Ycenter">	
					<view class="fboxRow Ycenter Xcenter btn border-radius12 font32 color-selectedFontColor btn-preview" @click="$pageTo(`/hotArticle/detail?id=${id}&pageType=${pageType}&preview=1`)">预览</view>
					<view class="fboxRow Ycenter Xcenter flex1 btn font32 border-radius12 bg-linear" @click="enterTap">确定</view>
				</view>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import ArticleItem from './components/article-item.vue'
	import HeadMore from '@/components/head-custom/head-more.vue';
	import { hotTextDetail, hotQuote } from '@/api/h5';
	import {detailStyleList, putCardStyleUpdate} from '@/api/card.js';
	export default {
		components: {ArticleItem, HeadMore},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				isAction: false,
				detail: {},
				userList: [],
				userIndex: '',
				isApp: true,
				id: '',
				pageType: 0
			}
		},
		onLoad(option) {
			if(option.pageType){
				this.pageType = option.pageType
			}
			if (option.id) {
				this.id = option.id
				this.getDetail();
			}
			// this.getUser()
		},
		methods: {
			getDetail(){
				hotTextDetail({ id: this.id, type: this.pageType == 0 ?  0 : 1 }).then(res => {
					this.detail = res.data;
				});
			},
			getUser(){
				const { bw_user_temp } = getApp().getBWData(['bw_user_temp'])
				if (bw_user_temp && bw_user_temp.memberId) {
					detailStyleList({cardId: bw_user_temp.memberId}).then(res=>{
						res.data.filter(item=>{
							item.check = false
						})
						this.userList = res.data
					})
				}
			},
			enterTap(){
				// 关联信息时需要去修改名片样式，产品需求如此
				// const {style, styleId, companyId} =this.userList[this.userIndex]
				// putCardStyleUpdate( {
				// 	"organisationId": companyId,
				// 	"styleId": styleId,
				// 	// "themeId": style
				// }).then(res=>{
					
				// })
				hotQuote({id: this.id, type:this.detail.type }).then(res=>{
					if(res.data){
						this.$pageTo(`/hotArticle/detail?id=${res.data}&pageType=2`,'redirectTo')
					}
				})
			},
			radioTap(item,index){
				this.userList.filter(item=>{
					item.check = false
				})
				this.userIndex = index
				this.userList[index].check = true
			},
			closePage(){
				uni.navigateBack()
			}
			
		},
	}
</script>

<style lang="scss" scoped>
::v-deep .u-tabbar__content {
	background-color: var(--controllerBgColor);
	border: none;
	.u-tabbar__content__item-wrapper {
		height: 120rpx;
	}
}
	.wrap{padding: 40rpx;}
	.article-card{background-color: var(--viewBgColor);padding: 24rpx; border-radius: 8rpx;}
	.article-card .pic{width: 100rpx;height: 100rpx; margin-right: 24rpx; border-radius: 8rpx;overflow: hidden;}
	.article-relevance{margin: 54rpx 0 0;}
	.bd{padding: 32rpx 0 0;}
	.user-item{position: relative; padding-right: 24rpx; margin-bottom: 40rpx; border-radius: 8rpx;background-color: var(--viewBgColor);overflow: hidden;}
	.avatar{width: 230rpx;height: 214rpx;overflow: hidden;background-color: #fff;}
	.line{position: absolute;left: 215rpx;top: 0; width: 40rpx;height: 224rpx;background-color: var(--viewBgColor);transform: rotate(6deg);}
	.info{padding: 28rpx  0 0 32rpx;color: var(--contentFontDarkColor)}
	.info .company{margin-top: 26rpx}
	.info .bwfont{margin-right: 16rpx;font-size: 28rpx;}
	.name{color: var(--titleFontColor)}
	.radio{position: relative;}
	.icon{ position: absolute;right: 0;top: 0; width: 38rpx;height: 36rpx}
	.radio{width: 32rpx;height: 32rpx;border: 1px solid #FFD9B5;border-radius: 50%;}
	// .fixed-bottom{position:fixed;bottom:0;left: 0;}
	.bottom-btn{ padding: 0 40rpx; width: 100%;}
	.btn-preview{background: rgba(255, 217, 181, 0.10);width: 210rpx;}
	.btn{height: 76rpx;}
	.btn +.btn{margin-left: 36rpx;}
</style>